let vm = new Vue({
    el:'.main-container',  //选中整个main
    data() {
        return {
            page:{},
            isShow: false,
            condition:{
                sid:'',
                name:''
            },
            // highLight:false,
            setting: {
                data: {
                    simpleData: {
                        enable: true,
                        pIdKey: "parentId",//父节点的名字
                        idKey: "id" //子节点的名字
                    },//开启简单树
                    key: {
                        title: 'ztree'
                    }
                },
                callback: {//回掉函数
                    onClick: this.onClick,
                    //根据编辑的返回值是否需要继续编辑
                    beforeEditName: this.beforeEditName,
                    beforeRemove: this.beforeRemove
                },
                view: {
                    addHoverDom: this.addHoverDom,
                    removeHoverDom: this.removeHoverDom
                },
                edit: {
                    enable: true,
                    removeTitle: '删除',
                    renameTitle: '修改'
                }
            },
            nodes: [

            ]
        }
    },
    methods:{
        //编辑
        beforeEditName: function (treeId, treeNode) {
            // console.log(treeId,treeNode);
            // console.log(treeNode)
            this.toUpdate(treeNode.id);
            return false;
        },
        //删除
        beforeRemove: function (treeId, treeNode) {
            // console.log(treeId,treeNode);
            this.deleteById(treeNode.id);
            this.selectAll();
            this.init();
            return false;
        },
        //生成添加节点
        addHoverDom: function (treeId, treeNode) {
            //<span class="button add" id="treeId_4_edit" title="修改" treenode_edit="" style=""></span>
            //console.log(treeNode);
            let tid = treeNode.tId;
            let spanObj = $(`#${tid}_add`);
            if (spanObj.length > 0) {
                //已存在，阻止构建
                return;
            }
            let span = `<span class="button add" id="${tid}_add" title="新增" treenode_edit="" style=""></span>`
            //找到上级父节点a对象
            $(`#${tid}_a`).append(span);
            //绑定点击事件
            $(`#${tid}_add`).on('click', this.clickSpan)

        },
        clickSpan: function () {
            //阻止事件冒泡
            event.stopPropagation();
            this.toAdd();
        },
        removeHoverDom: function (treeId, treeNode) {
            //<span class="button add" id="treeId_4_edit" title="修改" treenode_edit="" style=""></span>
            $(`#${treeNode.tId}_add`).unbind().remove()
        },
        selectPage:function (start=1,pageSize=5) {
            this.page={};
            axios({
                url:`/guguanjia/manager/area/selectPage/${start}/${pageSize}`,   //相对路径同样受到base标签影响
                params:this.condition
            }).then(
                response=>{  //省略function关键字  自动传递上下文中的this
                    //this.apps = response.data.obj.list;
                    this.page = response.data.obj
                }
            ).catch(error=>{
                console.log(error.message);
            })
        },
        init: function () {
            axios({
                url:"/guguanjia/manager/area/selectAll" //相对路径同样受到base标签影响
            }).then(
                response=>{  //省略function关键字  自动传递上下文中的this
                    //this.apps = response.data.obj.list;
                    this.nodes = response.data.obj
                    this.nodes[this.nodes.length] = {'id':0,'name':'区域列表'};
                    $.fn.zTree.init($("#treeMenu"), this.setting, this.nodes);
                }
            ).catch(error=>{
                console.log(error.message);
            })
            // console.log(tree)
        },
        onClick: function (event, pullDownTreeone, TreeNode) {
            //把公司名回显
            this.condition={};
            this.condition.sid = TreeNode.id;
            this.selectPage();
            //根据公司把公司id设置为当前节点的查询条件
            this.condition.oid  = TreeNode.id;
            console.log(this.condition.oid)
        },

        selectAll:function () {
            //清空查询条件
            this.condition={};
            this.selectPage();
        },
        toUpdate:function (area) {
            layer.obj = area;
            layer.open({
                type: 2,
                title: '工单详情',
                maxmin: true,
                shadeClose: true, //点击遮罩关闭层
                area : ['70%' , '70%'],
                content: 'area/update.html',
                end:()=>{
                    this.selectAll();
                    this.init();
                }
            });
        },
        toAdd:function(){
            layer.open({
                type: 2,
                title: '工单详情',
                maxmin: true,
                shadeClose: true, //点击遮罩关闭层
                area : ['70%' , '70%'],
                content: 'area/add.html',
                end:()=>{
                    this.selectAll();
                    this.init();
                }
            });
        },
        deleteById:function (id) {
            layer.confirm('确认是否要删除？', {
                btn: ['是', '否'] //按钮
            }, () => {
                axios.put(`/guguanjia/manager/area//deleteById/${id}`).then(
                    (result) => {
                        if (result.data.success) {
                            layer.msg("删除成功");
                            this.selectAll();
                        } else {
                            layer.msg("删除失败");
                        }
                    }
                ).catch((error) => {
                    layer.msg("删除失败");
                })
            }, function () {
                layer.msg("取消")
            });
        },
        todetil:function (area) {
            layer.obj = area;
            layer.open({
                type: 2,
                title: '详情',
                maxmin: true,
                shadeClose: true, //点击遮罩关闭层
                area : ['60%' , '60%'],
                content: 'area/detail.html',
            });
        },
        //导入数据
        upload:function (e) {
            //e事件源对象，根据其获取文件
            let file = e.target.files[0];
            //获取form表单对象
            let formData = new FormData();
            //form对象添加file文件
            //key：file 数据：file
            formData.append("file",file);
            axios({
                url:'/guguanjia/manager/area/upload',
                method:'post',
                data:formData,
                header:{
                    //设置请求头，文件上传格式
                    'content-type':'multipart/form-data'
                }
            }).then(result=>{
                layer.msg(result.data.msg);
            }).catch(error=>{
                layer.msg(error.message);
            });
        },
        //导出数据
        download:function () {
            location.href='/guguanjia/manager/area/download'
        }
    },
    created:function () {
        this.selectPage();
        //console.log(this.page)
    },
    mounted:function () {//在ul节点挂载后初始化树
        this.init();
    }
});